<template>
  <el-card
    shadow="never"
    :body-style="{ padding: '16px 16px', height: '100%', position: 'relative' }"
    class="cus-card">
    <el-row :gutter="20" :style="{height: '100%', position: 'relative'}">
      <el-col :span="18" :style="{height: '100%', position: 'relative'}">
        <div class="problem-title">
          {{ prTitle }}
        </div>
        <div class="pa-box block">
          <el-table
            ref="singleTable"
            :data="labelsList"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="label"
              label="文本">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="entity"
              label="实体"
              width="220">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.entity" type="success"> {{ scope.row.entity }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pa-box-bottom">
          <el-button
            type="success"
            icon="el-icon-arrow-left"
            @click="onClickPrev">
            上一页
          </el-button>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage" status="success"></el-progress>
          <el-button
            type="success"
            @click="onClickNext">
            下一页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
      <el-col
        :span="6"
        :style="{height: '100%', position: 'relative'}">
        <el-card
          class="box-card"
          :style="{height: '100%', position: 'relative'}"
          :body-style="{ padding: '16px 16px', height: 'calc(100% - 60px)', position: 'relative'}"
          shadow="never">
          <div slot="header" class="clearfix">
            <span>备选实体列表</span>
          </div>
          <el-scrollbar style="height: 100%">
          <el-tree
            :data="entityList"
            node-key="id"
            @node-click="handleNodeClick">
          </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import entity_list from './entity_list.json'
import tag from './tag.json'

export default {
  data () {
    return {
      page: 0,
      list: [
        {
          text: '交通银行',
          type: '限制',
          entity: '8'
        },
        {
          text: '贵宾厅',
          type: '限制',
          entity: '8'
        },
        {
          text: '电话',
          type: '限制',
          entity: '8'
        }
      ],
      resTagData: tag.data,
      prTitle: '',
      entityList: [],
      labelsList: [],
      currentSelectRow: null
    }
  },
  created () {
    let entityList = []
    let id = 1
    entity_list.ans.forEach(entity => {
      let entityMix = {
        id: id ++,
        label: entity.name
      }
      if (entity.prop_list) {
        entityMix.children = entity.prop_list.map(prop => {
          return {
            id: id ++,
            label: prop
          }
        })
      }
      entityList.push(entityMix)
    });
    this.entityList = entityList

    this.page = 1
  },
  computed : {
    curTagData () {
      return this.resTagData[this.page - 1]
    },
    percentage () {
      return this.page / this.resTagData.length * 100
    }
  },
  watch : {
    curTagData (tagData) {
      const curTagData = tagData
      let tid = 1
      if (curTagData.labelsList) {
        this.labelsList = curTagData.labelsList
      } else {
        this.labelsList = curTagData.labels.map(item => {
          return {
            id: tid ++,
            label: curTagData.text.substring(item[0], item[1]),
            type: item[2],
            entity: (item || {}).entity || ''
          }
        })
        curTagData.labelsList = JSON.parse(JSON.stringify(this.labelsList))
      }

      this.prTitle  = curTagData.text
    }
  },
  methods: {
    handleCurrentChange (row) {
      this.currentSelectRow = row
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleNodeClick (data, node) {
      let text = data.label
      if (node.parent && node.parent.level !== 0) {
        text += ' - ' + node.parent.data.label
      }

      if (this.currentSelectRow) {
        this.currentSelectRow.entity = text

        // this.resTagData[this.page - 1].labels
        // const index = this.labelsList.indexOf(this.currentSelectRow)
        // if (index < this.labelsList.length - 1) {

        // }
        // console.log(this.labelsList.indexOf(this.currentSelectRow))
        // setCurrent(tableData[1])
      }
      // this.currentSelectRow && (this.currentSelectRow.entity = text)
    },
    onClickPrev () {
      let canPrev = false
      for (let i = 0; i < this.labelsList.length; i++) {
        if (this.labelsList[i].entity === '') {
          canPrev = false
          this.$message({
            message: '请完成实体标注',
            type: 'warning'
          });
          break
        } else {
          canPrev = true
        }
      } 

      if (canPrev) {
        this.resTagData[this.page - 1].labelsList = this.labelsList
        if (this.labelsList.length > 1 && this.page > 1) {
          this.page --
        }
      }
    },
    onClickNext () {
      let canNext = false
      for (let i = 0; i < this.labelsList.length; i++) {
        if (this.labelsList[i].entity === '') {
          canNext = false
          this.$message({
            message: '请完成实体标注',
            type: 'warning'
          });
          break
        } else {
          canNext = true
        }
      } 

      // console.log(this.resTagData[this.page - 1])
      // for (let j = 0; j < this.resTagData[this.page - 1].length; j++) {
      //   this.resTagData[this.page - 1][j].entity = this.labelsList[j].entity
      // }
      if (canNext) {
        this.resTagData[this.page - 1].labelsList = this.labelsList
        if (this.page < this.resTagData.length) {
          this.page ++
        }
      }
    }
  }
}
</script>

<style lang="scss">
.form-goods-filter {
  .el-form-item {
    margin-right: 30px;
  }
}
</style>

<style lang="scss" scoped>
.actions {
  margin-bottom: 15px;
}
.filter-wrap {
  margin-bottom: 16px;
  padding: 24px 24px 6px 24px;
  background: #f2f3f5;
}
.good-title-wrap {
  display: flex;
  align-items: center;
  .good-title {
    flex: 1;
    margin-left: 10px;
    line-height: 18px;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      position: relative;
      -webkit-box-orient: vertical;
    }
  }
}
.cus-card {
  height: 100%;
}
.pa-box {
  // width: 900px;
}
.problem-title {
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}
.pa-box-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 0 16px;
  /deep/.el-progress {
    flex: 1;
    margin: 0 20px;
    margin-top: 5px;
  }
}
</style>